<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">生产计划详情</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <el-col class="mr20 width100" v-if="planDetailData.approveStatus == 0 && planDetailData.plunStatus != 4">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="planAudit()"
                        v-hasPermi="['system:productPlan:approve']"
                    >审核</el-button>
                </el-col>
                <el-col class="mr20 width100" v-if="planDetailData.approveStatus == 1 && planDetailData.plunStatus == 0">
                    <el-button
                        class="btn-audit width100"
                        type="primary"
                        @click="planReverseAudit()"
                        v-hasPermi="['system:productPlan:approve']"
                    >反审核</el-button>
                </el-col>
                <el-col class="mr20 width100" v-if="planDetailData.approveStatus == 2 || planDetailData.plunStatus == 3 || planDetailData.approveStatus == 3">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="planEdit()"
                        v-hasPermi="['system:productPlan:edit']"
                    >编辑</el-button>
                </el-col>
                <el-col class="mr20 width100" v-if="planDetailData.plunStatus == 3 && planDetailData.approveStatus == 4">
                    <el-button
                        class="btn-delete width100"
                        type="primary"
                        @click="planDelete()"
                        v-hasPermi="['system:productPlan:remove']"
                    >删除</el-button>
                </el-col>
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span :class="{ 'active' : planDetailData.plunStatus == 3 }">草稿</span>
                        <span :class="{ 'active' : planDetailData.approveStatus == 0 }">待审核</span>
                        <span :class="{ 'active' : planDetailData.approveStatus == 1 }">已审核</span>
                        <span :class="{ 'active' : planDetailData.approveStatus == 2 }">反审核</span>
                        <span :class="{ 'active' : planDetailData.approveStatus == 3 }">拒绝</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>计划编码：</span>{{ planDetailData.planCode ? planDetailData.planCode : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>产品名称：</span>{{ planDetailData.productBasicName ? planDetailData.productBasicName : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>规格名称：</span>{{ planDetailData.productName ? planDetailData.productName : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>规格：</span>{{ planDetailData.specification ? planDetailData.specification : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>产品批号：</span>{{ planDetailData.batchNumber ? planDetailData.batchNumber : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>箱规：</span>{{ planDetailData.productSpace ? planDetailData.productSpace : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>产品注册证号：</span>{{ planDetailData.registrationNumber ? planDetailData.registrationNumber : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>生产序列号：</span>{{ planDetailData.productionSerialNumber ? planDetailData.productionSerialNumber : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>计划生产数量：</span>{{ planDetailData.planNum ? planDetailData.planNum : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>完成数量：</span>{{ planDetailData.endNum }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>计划开始时间：</span>{{ planDetailData.planStartTime ? planDetailData.planStartTime : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>计划结束时间：</span>{{ planDetailData.planEndTime ? planDetailData.planEndTime : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>计划发货日期：</span>{{ planDetailData.shipDate ? planDetailData.shipDate : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>码格式：</span>{{ planDetailData.codeFormat == 1 ? '一物一码' : planDetailData.codeFormat == 2 ? 'UDI码' : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                  <span>大码规格：</span>{{ planDetailData.largeSizeSpecifications ? planDetailData.largeSizeSpecifications : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>生产类型：</span>{{ planDetailData.produceType == 0 ? '标准生产' : '超量生产' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                  <span>备注：</span>{{ planDetailData.remark ? planDetailData.remark : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>状态：</span>
                    <font v-if="planDetailData.plunStatus == 0" style="color:#13C2C2;">计划中</font>
                    <font v-if="planDetailData.plunStatus == 1" style="color:#13C2C2">进行中</font>
                    <font v-if="planDetailData.plunStatus == 2" style="color:#52C41A">已完成</font>
                    <font v-if="planDetailData.plunStatus == 3" style="color:#13C2C2">草稿</font>
                </el-col>
                <el-col :span="12">
                    <span>审核状态：</span>
                    <font v-if="planDetailData.approveStatus == 0" style="color:#13C2C2;">待审核</font>
                    <font v-if="planDetailData.approveStatus == 1" style="color:#FA8C16">已审核</font>
                    <font v-if="planDetailData.approveStatus == 2" style="color:#fd562c">反审核</font>
                    <font v-if="planDetailData.approveStatus == 3" style="color:#fd562c">拒绝</font>
                </el-col>
            </el-row>
        </div>
        <!-- 审核/反审核 -->
        <el-dialog :visible.sync="open" width="500" top="100px" append-to-body title="审核意见" center>
            <el-row>
                <el-col :span="24">
                    <textarea
                    class="approve-textarea"
                    v-model="approveRemark"
                    type="textarea"
                    placeholder="请输入意见和看法"
                    >
                    </textarea>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    class="btn-success mr20 width100"
                    @click="agreeApprove()"
                >同意</el-button>
                <el-button
                    type="primary"
                    class="btn-cancel width100"
                    @click="disagreeApprove()"
                >拒绝</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { planDetail, planApprove, planDelete } from "@/api/system/plan/plan"
export default {
    name: "planDetail",
    data() {
        return {
            id: '',
            planDetailData: '',
            open: false,
            approveRemark: '',
            oldApproveStatus: ''
        }
    },
    created() {
        this.id = this.$route.query.id
        this.getDetailData()
    },
    methods: {
        // 获取详情信息
        getDetailData() {
            planDetail(this.id).then(res => {
                // console.log(res)
                this.planDetailData = res.data
                this.oldApproveStatus = res.data.approveStatus
            })
        },
        // 审核
        planAudit(){
            this.open = true
        },
        // 反审核
        planReverseAudit(){
            this.$modal.confirm('是否确认反审核？', '反审核').then(() => {
                planApprove(this.id, 2, this.oldApproveStatus).then(res => {
                    // console.log(res)
                    if(res.code == 200){
                        this.getDetailData()
                        this.$modal.msgSuccess("操作成功")
                    }
                })
            }).catch(() => {})
        },
        agreeApprove(){
            planApprove(this.id, 1, this.oldApproveStatus, this.approveRemark).then(res => {
                // console.log(res)
                if(res.code == 200){
                    this.getDetailData()
                    this.open = false
                    this.$modal.msgSuccess("操作成功")
                }
            })
        },
        disagreeApprove(){
            planApprove(this.id, 3, this.oldApproveStatus, this.approveRemark).then(res => {
                if(res.code == 200){
                    this.getDetailData()
                    this.open = false
                    this.$modal.msgSuccess("操作成功")
                }
            })
        },
        // 编辑
        planEdit(){
            this.$router.push({path:"/production/plan/edit",query:{id: this.id}})
        },
        // 删除
        planDelete() {
            this.$modal.confirm('是否确认删除当前数据？', '删除').then(() => {
                planDelete(this.id).then(res => {
                    if(res.code == 200){
                        this.$modal.msgSuccess("删除成功")
                        this.$tab.closeOpenPage({ path: "/production/plan/list" })
                    }
                })
            }).catch(() => {})
        },
    }
}
</script>
